body {
    font-family: "PT serif";
    background-color: rgb(249, 247, 241);
}

main>article {
    columns: 3;
    column-gap: 2rem;
    column-rule: 1px solid black;
}

h1,
h1+div {
    column-span: all;
    font-weight: 700;
    margin: 0;
    border-bottom: 1px solid black;
    padding: .5rem;
    text-align: center;
}

h1 {
    font-size: 3rem;
}

img {
    width: 5rem;
    height: 5rem;
}


section {
    // 不被切片
    break-inside: avoid;
    page-break-inside: avoid;
    text-align: justify;

    &:first-of-type {
        &>p:nth-of-type(2)::first-letter {
            font-size: 2rem;
            font-weight: 700;
            float: left;
            margin: 0 .5rem 0 0;
        }

        img {
            float: left;
            margin: 0 .5rem .5rem 0;
        }

    }

    &:nth-of-type(2) {
        & p:nth-of-type(1):first-letter {
            font-size: 2rem;
            font-weight: 700;
            float: left;
            margin: 0 .5rem 0 0;
        }

        img {
            float: right;
            margin: 0 0 .5rem .5rem;
        }

        ul {
            list-style: lower-roman;
        }
    }

    &:nth-of-type(3) {
        & p:nth-of-type(1):first-letter {
            font-size: 2rem;
            font-weight: 700;
            float: left;
            margin: 0 .5rem 0 0;
        }

        div {
            background-color: rgb(236, 195, 11);
            width: 50px;
            height: 50px;
            display: inline-block;
            margin: 0 .5rem;
            text-align: left;
        }

        div:nth-of-type(1) {
            border-radius: 40% 5%;
        }

        div:nth-of-type(2) {
            border-radius: 5% 40%;
        }

        div:nth-of-type(3) {
            border-radius: 50% 50%;
        }

        div:nth-of-type(4) {
            border-radius: 40% 5%;
            background: #e0e8ee;
            box-shadow: 10px 10px 39px #b1b7bc,
                -29px -29px 39px #ffffff;
        }

        div:nth-of-type(5) {
            border-radius: 5% 40%;
            background: #e0e8ee;
            box-shadow: 10px 10px 39px #b1b7bc,
                -29px -29px 39px #ffffff;
        }

        div:nth-of-type(6) {
            border-radius: 50% 50%;
            background: #e0e8ee;
            box-shadow: 10px 10px 39px #b1b7bc,
                -29px -29px 39px #ffffff;
        }

    }
}